<div class="personinfo_page" id="personinfo_page" >

    <div class="personinfo_title">
        <span>个人信息</span>
        <span class="person_landing_title" id="upload" class="js_infoclose" onclick="closeinfo()"><i class="iconfont icon-guanbi"></i></span>
    </div>

    <div id="infoform" class="js_infofrom" style="display: inline">
        <form class="form-edit userform">
            <div class="form-edit-profile">
                <label for="user" class="form-edit-label">昵称：</label>
                <div class="form-edit-input js_infonname">
                    <span>村头蹦迪最野发型最炫蓝玫瑰炫舞家族族长</span>
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">用户名：</label>
                <div class="form-edit-input js_infousername">
                    <span>LJR</span>
                </div>
            </div>
            <div class="form-edit-profile">
                <label class="form-edit-label">性别：</label>
                <div class="form-edit-input js_infosex">
                    <span>男男女女</span>
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">联系电话：</label>
                <div class="form-edit-input js_infophone">
                    <span>18877335196</span>
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">电子邮箱：</label>
                <div class="form-edit-input js_infoemail">
                    <span>22251718@qq.com</span>
                </div>
            </div>
            <div class="person_buttom">
                <input type="button"  value="完善/修改个人信息" class="infochange_button js_infobutton" style="color:#fcfaff">
            </div>
        </form>
    </div>

    <div id="changeform" class="js_changefrom" style="display: none">
        <form class="form-edit userform">
            <div class="form-edit-profile">
                <label for="user" class="form-edit-label">昵称：</label>
                <div class="form-edit-input js_changenname" id="">
                    <input class="input-content" type="text" placeholder="请输入您的自定义昵称（不填则不做修改）" id="user">
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">用户名：</label>
                <div class="form-edit-input js_infousername">
                    <span>LJR</span>
                </div>
            </div>
            <div class="form-edit-profile">
                <label class="form-edit-label">性别：</label>
                <div class="form-edit-input js_changesex">
                    <label class="form-men"><input type="radio" name="sex" value="男" id="men" /> 男</label>
                    <label class="form-men"><input type="radio" name="sex" value="女" />  女</label>
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">联系电话：</label>
                <div class="form-edit-input js_changephone">
                    <input type="text" placeholder="请输入您的联系号码（不填则不做修改）"  class="input-content">
                </div>
            </div>
            <div class="form-edit-profile">
                <label for="" class="form-edit-label">电子邮箱：</label>
                <div class="form-edit-input js_changeemail">
                    <input type="text" placeholder="请输入您的电子邮箱（不填则不做修改）" class="input-content">
                </div>
            </div>
            <div class="person_buttom">
                <input type="button" onclick="changeinfocheck()" value="修改" class="infochange_okbutton js_infook" style="color:#fcfaff">
                <input type="button" onclick="" value="返回" class="infochange_backbutton js_infoback" style="color:rgba(0,0,0,0.54)">
            </div>
        </form>
        <script type="text/javascript">
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-pink',
                radioClass: 'iradio_square-pink',
            });
        </script>
    </div>
</div>
<div class="commingpage js_changeinfoconfirm" style="display: none;" >
    <div class="confirm" >
        <div class="landing_title"><i class="iconfont icon-guanbi" onclick="closeinfoconfirm()"></i></div>
        <p class="landing_title_tt js_confirmVlue">确定修改用户信息吗？</p>
        <input type="button" value="确定" class="isok changeinfook" onclick="updateuserinfo()"  >
        <input type="button" value="取消" class="isok isno changeinfono" onclick="closeinfoconfirm()">
    </div>
</div>

<script>
    function tip(text){
        var bomb = $(".js_bombword").html(text);
        $(".js_bombpromt").fadeIn().stop(true,true);
        setTimeout(function(e){
            $(".js_bombpromt").fadeOut();
        },1200);
    };
    //个人信息与修改界面切换
    $(".js_infobutton").click(function(){
        $(".js_infofrom").css("display","none");
        $(".js_changefrom").fadeIn();
    });
    $(".js_infoback").click(function(){
        $(".js_changefrom").fadeOut();
        setTimeout(function(e){
            $(".js_infofrom").css("display","inline");
            },400)
    });
    //关闭个人信息页面
    function closeinfo() {
        $("#personalinfo").css("display","none");
        $(".js_changefrom").fadeOut();
        setTimeout(function(e){
            $(".js_infofrom").css("display","inline");
        },400)
        //初始化表单
        $(".js_changenname input").val("");
        $(".checked").removeClass("checked");
        $(".js_changephone input").val("");
        $(".js_changeemail input").val("");
    }
    //关闭修改确认窗口
    function closeinfoconfirm() {
        $(".js_changeinfoconfirm").css("display","none");
    }
    //修改个人信息确认
    function changeinfocheck(){
        //输入的个人信息验证
        var nname = $(".js_changenname input").val();
        var sex = $(".js_changesex input:checked").val();
        var phone = $(".js_changephone input").val();
        var email = $(".js_changeemail input").val();
        //个人信息格式验证（不为空则进行验证，为空则不进行验证）
        //1.姓名验证是否有非法字符 2.电话验证是否为11位数字 3.邮箱验证格式是否正确
        if (nname != "" && (/[^\w\u4e00-\u9fa5]+/.test(nname)) ){
            $(".js_changenname input").css("border","1px solid #dc1313c7");
            setTimeout(function(e){
                $(".js_changenname input").css("border","1px solid #bfcbd9");
            },1200);
            this.tip("昵称中含有非法字符~");
        }else if (phone != "" && phone.match("^\\d{11}$") == null){
            $(".js_changephone input").css("border","1px solid #dc1313c7");
            setTimeout(function(e){
                $(".js_changephone input").css("border","1px solid #bfcbd9");
            },1200);
            this.tip("请输入正确格式的电话号码~");
        }else if (email != "" && email.match("^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$") == null){
            $(".js_changeemail input").css("border","1px solid #dc1313c7");
            setTimeout(function(e){
                $(".js_changeemail input").css("border","1px solid #bfcbd9");
            },1200);
            this.tip("请输入正确格式的电子邮箱~");
        }else {
            //显示修改确认按钮
            $(".js_changeinfoconfirm").css("display","inline");
        }
    }
    //更新个人信息
    function updateuserinfo() {
        //获取个人信息更改内容（上一轮已经进行数据格式的验证）
        var $this = this;
        var nname = $(".js_changenname input").val();
        var sex = $(".js_changesex input:checked").val();
        var phone = $(".js_changephone input").val();
        var email = $(".js_changeemail input").val();
        //为空时说明数据不做修改
        if ( !(typeof (sex) !="undefined") ){
            sex = $(".js_infosex span").html();
        }
        if(nname == ""){
            nname = $(".js_infonname span").html();
        }
        if(phone == ""){
            phone = $(".js_infophone span").html();
        }
        if(email == ""){
            email = $(".js_infoemail span").html();
        }

        //修改请求
        $.ajax({
            url: "music/user/updateuserinfo",
            data: { nname:nname,sex:sex,phone:phone,email:email},
            dataType: "json",
            type: "post",
            success:function (data) {
                var result = data.result;
                if(result == 1){
                    //更新个人信息界面
                    $(".js_infonname span").html(nname);
                    $(".js_infosex span").html(sex);
                    $(".js_infophone span").html(phone);
                    $(".js_infoemail span").html(email);
                    //变更修改后的昵称
                    $("#afterlogin_username").text(nname);

                    //关闭窗口，初始化表单
                    $(".js_changeinfoconfirm").css("display","none");
                    $("#personalinfo").css("display","none");
                    $(".js_changefrom").fadeOut();
                    setTimeout(function(e){
                        $(".js_infofrom").css("display","inline");
                    },400)
                    //初始化表单
                    $(".js_changenname input").val("");
                    $(".checked").removeClass("checked");
                    $(".js_changephone input").val("");
                    $(".js_changeemail input").val("");

                    $this.tip("个人信息修改成功~");
                }
                if(result == 2){
                    $this.tip("个人信息修改失败了！");
                }
            },
            error:function (data) {
                $this.tip("发生未知错误！");
            }
        });
    }
</script>

